<template>
  <div class="operator">
    <el-input
      v-model.trim="content"
      @keyup.enter="handleSearch"
      placeholder="请输入用户名↵"
      prefix-icon="Search"
      clearable
    />
    <el-button icon="Tickets" @click="handleShowAll" type="primary" plain
      >显示全部</el-button
    >
    <el-button icon="Plus" @click="handleAdd" type="warning" plain
      >添加</el-button
    >
    <el-button icon="Delete" @click="handleDelete" type="danger" plain
      >多选注销</el-button
    >
  </div>
  <el-table
    ref="multipleTableRef"
    :data="members"
    border
    @select="handleSelect"
    @select-all="handleSelectAll"
  >
    <el-table-column type="selection" />
    <el-table-column prop="id" label="ID" width="100"> </el-table-column>
    <el-table-column prop="username" label="用户名" width="100" />
    <el-table-column prop="password" label="密码" width="100" />
    <el-table-column label="类型" width="150">
      <template #default="tableData">
        <div v-if="tableData.row.type == 1">交通部门</div>
        <div v-else>普通用户</div>
      </template>
    </el-table-column>
    <el-table-column label="登录状态" width="150">
      <template #default="members">
        <el-button
          v-if="members.row.onlinestatus"
          type="success"
          plain
          icon="user"
          >在线</el-button
        >
        <el-button v-else type="info" plain icon="user">下线</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="deleted" label="账号状态" width="150">
      <template #default="members">
        <el-button
          v-if="members.row.deleted"
          type="danger"
          plain
          icon="CircleClose"
          >已注销</el-button
        >
        <el-button v-else type="primary" plain icon="CircleCheck"
          >已注册</el-button
        >
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="members">
        <el-button
          v-if="members.row.type == 1"
          @click="changePower(members.row.id, members.row.type)"
          type="success"
          plain
          icon="bottom"
          >降级</el-button
        >
        <el-button
          v-else
          @click="changePower(members.row.id, members.row.type)"
          type="success"
          plain
          icon="top"
          >升级</el-button
        >
        <el-button
          @click="
            handleOperator(
              members.row.id,
              members.row.username,
              members.row.password
            )
          "
          type="warning"
          plain
          icon="Tools"
          >管理</el-button
        >
        <el-button
          @click="handleOutLine(members.row.id)"
          type="danger"
          plain
          icon="Warning"
          >下线</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <div class="pagination">
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="offset"
      :page-sizes="[5, 10, 15, 20]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%" draggable>
    <el-form
      ref="userFormRef"
      :model="userForm"
      :rules="rules"
      label-position="top"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="userForm.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="userForm.password" />
      </el-form-item>
      <el-form-item>
        <el-button @click="submitForm(userFormRef)">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import { defineProps } from "vue"
// 导入hooks
import { useGetUsers } from "../hooks/useGetUsers"
//判断为交管用户还是普通用户
const props = defineProps(["nowPage"])
//获取用户数据
const {
  members,
  total,
  page,
  offset,
  handleCurrentChange,
  handleSizeChange,
  content,
  handleSearch,
  handleShowAll,
  dialogVisible,
  handleOperator,
  dialogTitle,
  userForm,
  rules,
  submitForm,
  userFormRef,
  handleAdd,
  changePower,
  handleOutLine,
  handleSelect,
  handleSelectAll,
  handleDelete,
} = useGetUsers(props.nowPage)
</script>
<style lang="stylus" scoped>
.operator
    text-align right
    margin-bottom 10px
    .el-input
      width 20vw
      margin-right 15px
.el-table>>>.el-table__cell
  text-align center
.pagination
  position absolute
  bottom 10px
  text-align center
  width 100%
.el-pagination
  margin-left 50%
  transform translateX(-50%)
</style>
